<template>
  <views class="enterprise_invoice_address">
    <!-- 新增/修改 模态框 -->
    <modelBox :show="add_show">
      <div class="add_lists">
        <div class="flex flexR add_lists_title">
          <viewTitle :title="type==1?'新增开票地址':'修改开票地址'" :border="false"></viewTitle>
          <div class="el-icon-close cp" @click="close_Model"></div>
        </div>
        <div class="add_input_lists">
          <div class="flex flexR center add_inputs">
            <div class="add_input_lists_title">收件人姓名</div>
            <div class="add_input_lists_item">
              <el-input placeholder="请输入姓名" v-model="form.receiver_name" clearable></el-input>
            </div>
          </div>
        </div>
        <div class="add_input_lists">
          <div class="flex flexR center add_inputs">
            <div class="add_input_lists_title">手机号码</div>
            <div class="add_input_lists_item">
              <el-input placeholder="请输入手机号码" v-model="form.receiver_mobile" clearable></el-input>
            </div>
          </div>
        </div>
        <div class="add_input_lists">
          <div class="flex flexR center add_inputs">
            <div class="add_input_lists_title">收货地址</div>
            <div class="add_input_lists_item">
              <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                clearable
                maxlength="80"
                v-model="form.receiver_address"
              ></el-input>
            </div>
          </div>
        </div>

        <!--  设为默认地址  -->
        <div class="default_address flex flexR">
          <el-checkbox v-model="form.is_default">设为默认地址</el-checkbox>
        </div>
        <!-- 确认 取消 -->
        <div class="Confirm_cancel flex flexR center">
          <el-button type="primary" @click="addrCommit">确定</el-button>
          <el-button type @click="close_Model">取消</el-button>
        </div>
      </div>
    </modelBox>
    <div class="hint_title flex flexR">
      <div class="flex flexR hint_title_top">
        <viewTitle :title="'地址管理'" :border="false"></viewTitle>
        <!-- 提示 -->
        <div class="hint">最多添加五个</div>
      </div>
      <div class="billing_information_top_btn" @click="add_addre(1,form)" v-if="isAdd">+新增地址</div>
    </div>

    <!-- 地址管理列表 -->
    <div class="address_list">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="getRowClass"
        :select-on-indeterminate="true"
        :fit="true"
        :lazy="true"
        border
      >
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="receiver_name" label="收件人" width="180"></el-table-column>
        <el-table-column prop="receiver_mobile" label="电话号码" width="180"></el-table-column>
        <el-table-column prop="receiver_address" label="收件人地址" width="400"></el-table-column>
        <el-table-column
          prop="is_default"
          :formatter="(row)=>{return row.is_default?'是':'否';}"
          label="默认地址"
        ></el-table-column>
        <el-table-column label="操作"  width="250">
          <div class="table_operation" slot-scope="scope">
            <el-button type="danger" @click="add_addre(2,scope.row)">修改</el-button>
            <el-button type="warning" @click="delete_address(scope.row.enterprise_invoice_address_id)">删除</el-button>
          </div>
        </el-table-column>
      </el-table>
    </div>
  </views>
</template>



<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      tableData: [],
      add_show: false, //  新增/修改  展示
      type: 1, //  1 新增 2 修改
      form: {
        receiver_name: "", //  收件人姓名
        receiver_mobile: "", //  手机号码
        receiver_address: "", //  收件地址
        is_default: false, //  默认地址,
        enterprise_invoice_address_id: 0
      }
    };
  },
  computed:{
    ...mapGetters(['getButtonPermission']),
    isAdd(){
      return  this.getButtonPermission[this.$route.path]  &&  this.getButtonPermission[this.$route.path].add ? 1 : 0;
    }
  },

  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    // 新增充值账号
    add_addre(val, form) {
      this.add_show = true;
      this.type = val;
      if (val == 1) {
        this.form = {
          receiver_name: "", //  收件人姓名
          receiver_mobile: "", //  手机号码
          receiver_address: "", //  收件地址
          is_default: false, //  默认地址,
          enterprise_invoice_address_id: 0
        };
      } else {
        this.form = form;
        this.form.is_default = this.form.is_default ? true : false;
      }
    },
    close_Model() {
      console.log(11);
      this.add_show = false;
    },
    getData() {
      this.getEnterpriseData();
    },
    //获取数据
    getEnterpriseData() {
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.eaddressList,
        {}
      );
      if (code != 200) {
        this.$message.error(msg);
        return;
      }
      this.tableData = data;
    },
    //新增修改地址
    addrCommit() {
      this.form.is_default = this.form.is_default ? 1 : 0;
      let { code, msg } = this.$api.sendSync(
        this.$mapapi.eaddEditAddress,
        this.form
      );
      this.close_Model();
      if (code != 200) {
        this.$message.error(msg);
        return;
      } else {
        this.$message.success(msg);
        this.getData();
      }
    },
    delete_address(enterprise_invoice_address_id) {
      let data = this.$api.sendSync(
        this.$mapapi.e_delAddress,
        {enterprise_invoice_address_id:enterprise_invoice_address_id}
      );
      if(data.code==200){
            this.getEnterpriseData();
            this.$message.success(data.msg);
      }
      this.$message.success(data.msg);
    }
  },
  mounted() {
    this.getData();
  },
  created() {}
};
</script>


<style lang="less" :scope="true"  src="@/style/invoice/enterprise_invoice_address.less" >
</style>